import React, { useEffect, useState } from 'react';
import { Divider } from 'antd';
import styles from './index.less';

const Board = ({ tableData = [], selectColumns = [] }) => {
  const [indicatorSummary, setIndicatorSummary] = useState([]);

  useEffect(() => {
    init();
  }, [tableData]);
  const init = () => {
    const _total = tableData[0],
      indicatorSummaryEnum = [
        {
          title: '综合统计',
          beforeUnit: 'MWh',
          afterUnit: '元/MWh',
          countUnit: '万元',
          beforeList: ['totalStatementEnergyQuantity'],
          afterList: ['totalStatementEnergyPrice'],
          countList: ['totalStatementEnergyIncome'],
        },
        {
          title: '中长期',
          beforeUnit: 'MWh',
          afterUnit: '元/MWh',
          countUnit: '万元',
          beforeList: ['longQuantity'],
          afterList: ['longPrice'],
          countList: ['longIncome'],
        },
        {
          title: '现货',
          beforeUnit: 'MWh',
          afterUnit: '元/MWh',
          countUnit: '万元',
          beforeList: [
            'transprovincialDayaheadSpotQuantity',
            'transprovincialRealtimeSpotQuantity',
            'realtimeSpotQuantity',
          ],
          afterList: [],
          countList: [
            'transprovincialDayaheadSpotIncome',
            'transprovincialRealtimeSpotIncome',
            'realtimeSpotIncome',
          ],
        },
        {
          title: '偏差',
          beforeUnit: 'MWh',
          afterUnit: '元/MWh',
          countUnit: '万元',
          beforeList: ['realtimeDeviationQuantity'],
          afterList: [],
          countList: ['realtimeDeviationIncome'],
        },
      ];
    let indicatorSummaryList = [];
    indicatorSummaryEnum?.forEach((ise) => {
      const indicatorSlide = {
        ...ise,
        name: ise.title,
      };
      const isBeforeList = [];
      const isCountList = [];
      const isAfterList = [];
      // let hasData = false;
      ise.beforeList?.forEach((c) => {
        // if (selectColumns.includes(c)) {
        // hasData = true;
        isBeforeList.push(c);
        // }
      });
      ise.afterList?.forEach((c) => {
        // if (selectColumns.includes(c)) {
        // hasData = true;
        isAfterList.push(c);
        // }
      });
      ise.countList?.forEach((c) => {
        // if (selectColumns.includes(c)) {
        // hasData = true;
        isCountList.push(c);
        // }
      });
      // if (!hasData) return;
      let beforeSum = 0;
      let countSum = 0;
      let afterSum = 0;
      if (isBeforeList.length) {
        isBeforeList?.forEach((b) => {
          beforeSum += parseFloat(_total[b]);
        });
        indicatorSlide.before = beforeSum.toFixed(3);
      }
      if (isAfterList.length) {
        isAfterList?.forEach((b) => {
          afterSum += parseFloat(_total[b]);
        });
        indicatorSlide.after = afterSum.toFixed(2);
      }
      if (isCountList.length) {
        isCountList?.forEach((b) => {
          countSum += parseFloat(_total[b]);
        });
        indicatorSlide.count = (countSum / 10000).toFixed(4);
      }
      indicatorSummaryList.push(indicatorSlide);
    });

    if (!indicatorSummaryList.length) return;
    //'现货'、'偏差' 电价前端重新计算
    indicatorSummaryList = indicatorSummaryList.map((t) => {
      if (['现货', '偏差'].includes(t.name)) {
        return {
          ...t,
          after: (parseFloat(t.count * 10000) / parseFloat(t.before)).toFixed(2),
        };
      }
      return t;
    });
    setIndicatorSummary(indicatorSummaryList);
  };

  if (!tableData.length || !indicatorSummary.length) return <></>;
  return (
    <div className={styles.board}>
      {indicatorSummary?.map((t, i) => {
        return (
          <React.Fragment key={i}>
            <div className={styles.board_item}>
              <div className={styles.container_left}>
                <h3>{t.name}</h3>
                <div className={styles.income}>电费</div>
                {t.count ? (
                  <div className={styles.unit}>
                    <span>
                      {t.count < 0 ? '' : '+'}
                      {t.count}
                    </span>
                    <label>{t.countUnit}</label>
                  </div>
                ) : (
                  ''
                )}
              </div>
              <div className={styles.container_right}>
                {t.before ? (
                  <>
                    <div className={styles.quantity}>电量</div>
                    <div className={styles.quantity_unit}>
                      <span>{t.before || '-'}</span>
                      <label>{t.beforeUnit}</label>
                    </div>
                  </>
                ) : (
                  ''
                )}
                {t.after ? (
                  <>
                    <div className={styles.price}>电价</div>
                    <div className={styles.price_unit}>
                      <span>{t.after || '-'}</span>
                      <label>{t.afterUnit}</label>
                    </div>
                  </>
                ) : (
                  ''
                )}
              </div>
            </div>
            {i !== indicatorSummary.length - 1 ? (
              <Divider
                type="vertical"
                style={{ height: 50, borderLeft: '1px solid rgba(255, 255, 255, 0.3)' }}
              />
            ) : (
              ''
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
};

export default Board;
